<!--<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->
<style>
    html,body,#container{
        height:100%;
        width:100%;
    }
    /*.btn{*/
    /*    width:10rem;*/
    /*    margin-left:6.8rem;*/
    /*}*/
</style>
<body  onload="initMap()">
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Merchant_phone')}:</label>
        <div class="col-xs-12 col-sm-8">
            {if $group_id != 2}
            <input id="c-merchant_phone" class="form-control" name="row[merchant_phone]" type="text" value="{$row.merchant_phone}" data-rule="required;mobile" placeholder="请输入手机号">
            {else/}
            <span class="form-control" style="border: none">{$row.merchant_phone}</span>
            {/if}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Merchant_password')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-merchant_password" class="form-control" name="row[merchant_password]" type="password" value="" placeholder="不修改请留空">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Shop_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            {if $group_id != 2}
            <input id="c-shop_name" class="form-control" name="row[shop_name]" type="text" value="{$row.shop_name}">
            {else/}
            <span class="form-control" style="border: none">{$row.shop_name}</span>
            {/if}
        </div>
    </div>
<!--    <div class="form-group">-->
<!--        <label class="control-label col-xs-12 col-sm-2">{:__('City')}:</label>-->
<!--        <div class="col-xs-12 col-sm-8">-->
<!--            <div class='control-relative'><input id="c-city" class="form-control" data-toggle="city-picker" name="row[city]" type="text" value="{$row.city}"></div>-->
<!--        </div>-->
<!--    </div>-->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Merchant_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            {if $group_id != 2}
            <input id="c-merchant_name" class="form-control" name="row[merchant_name]" type="text" value="{$row.merchant_name}">
            {else/}
            <span class="form-control" style="border: none">{$row.shop_name}</span>
            {/if}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Shop_logo')}:</label>
        <div class="col-xs-12 col-sm-8">
            {if $group_id != 2}
            {:Form::image('row[shop_logo]', $row.shop_logo, ['data-rule'=>'required', 'readonly' => ''])}
            {else/}
            <ul class="row list-inline plupload-preview" id="p-shop_logo" data-listidx="0">
                <li class="col-xs-3"><a href="{$row.shop_logo}" data-url="{$row.shop_logo}" target="_blank" class="thumbnail"><img src="{$row.shop_logo}" onerror="this.src='/backadmin/ajax/icon?suffix=png';this.onerror=null;" class="img-responsive"></a></li>
            </ul>
            {/if}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Shop_banner')}:</label>
        <div class="col-xs-12 col-sm-8">
            {if $group_id != 2}
            {:Form::images('row[shop_banner]', $row.shop_banner, ['data-rule'=>'required'])}
            {else/}
            <ul class="row list-inline plupload-preview" id="p-shop_banner" data-listidx="0">
                {foreach $row.shop_banner_list as $vo}
                <li class="col-xs-3"><a href="{$vo}" data-url="{$vo}" target="_blank" class="thumbnail"><img src="{$vo}" onerror="this.src='/backadmin/ajax/icon?suffix=png';this.onerror=null;" class="img-responsive"></a></li>
                {/foreach}
            </ul>
            {/if}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Service')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::selectpickers('row[service][]', $serviceList, explode(',', $row.service), ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Open_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::timepicker('row[day_start_time]', $row.day_start_time, ['data-rule'=>'required', 'class'=>'form-control-static'])}
            -
            {:Form::timepicker('row[day_end_time]', $row.day_end_time, ['data-rule'=>'required', 'class'=>'form-control-static'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Night_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::timepicker('row[night_start_time]', $row.night_start_time, ['data-rule'=>'required', 'class'=>'form-control-static'])}
            -
            {:Form::timepicker('row[night_end_time]', $row.night_end_time, ['data-rule'=>'required', 'class'=>'form-control-static'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Signing_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            {if $group_id != 2}
            {:Form::datetimepicker('row[signing_time]', $row.signing_time, ['data-rule'=>'required', 'class'=>'form-control', 'data-date-format'=>'YYYY-MM-DD'])}
            {else/}
            <span class="form-control" style="border: none">{if !empty($row.signing_time)}{$row.signing_time|date='Y-m-d'}{/if}</span>
            {/if}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Commission_rate')}:</label>
        <div class="col-xs-12 col-sm-8">
            {if $group_id != 2}
            <input id="c-commission_rate" class="form-control" step="0.1" name="row[commission_rate]" type="number" value="{$row.commission_rate}" min="0">
            {else/}
            <span class="form-control" style="border: none">{$row.commission_rate}</span>
            {/if}

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Cancel_rate')}:</label>
        <div class="col-xs-12 col-sm-8">
            {if $group_id != 2}
            <input id="c-cancel_rate" class="form-control" step="0.1" name="row[cancel_rate]" type="number" value="{$row.cancel_rate}" min="0">
            {else/}
            <span class="form-control" style="border: none">{$row.cancel_rate}</span>
            {/if}

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Stay_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-stay_time" class="form-control" step="1" name="row[stay_time]" type="number" value="{$row.stay_time}" min="0">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Alipay_account')}:</label>
        <div class="col-xs-12 col-sm-8">
            {if $group_id != 2}
            <input id="c-alipay_account" class="form-control" name="row[alipay_account]" type="text" value="{$row.alipay_account}">
            {else/}
            <span class="form-control" style="border: none">{$row.alipay_account}</span>
            {/if}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Alipay_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            {if $group_id != 2}
            <input id="c-alipay_name" class="form-control" name="row[alipay_name]" type="text" value="{$row.alipay_name}">
            {else/}
            <span class="form-control" style="border: none">{$row.alipay_name}</span>
            {/if}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Shop_balance')}:</label>
        <div class="col-xs-12 col-sm-8">
<!--            <input id="c-shop_balance" class="form-control" step="0.1" name="row[shop_balance]" type="number" value="{$row.shop_balance}" min="0.01" readonly>-->
            <span class="form-control" style="border: none">{$row.shop_balance}</span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Introduction')}:</label>
        <div class="col-xs-12 col-sm-8">
            {if $group_id != 2}
            <textarea id="c-introduction" class="form-control " rows="5" name="row[introduction]" cols="50">{$row.introduction}</textarea>
            {else/}
            <span class="form-control" style="border: none;height: auto;">{$row.introduction}</span>
            {/if}

        </div>
    </div>
<!--    <div class="form-group">-->
<!--        <label class="control-label col-xs-12 col-sm-2">{:__('Notice')}:</label>-->
<!--        <div class="col-xs-12 col-sm-8">-->
<!--            {if $group_id != 2}-->
<!--            <textarea id="c-notice" class="form-control " rows="5" name="row[notice]" cols="50">{$row.notice}</textarea>-->
<!--            {else/}-->
<!--            <span class="form-control" style="border: none;height: auto;">{$row.notice}</span>-->
<!--            {/if}-->
<!--        </div>-->
<!--    </div>-->

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Traffic_notice')}:</label>
        <div class="col-xs-12 col-sm-8">
            {if $group_id != 2}
            <textarea id="c-traffic_notice" class="form-control" rows="5" name="row[traffic_notice]" cols="50">{$row.traffic_notice}</textarea>
            {else/}
            <span class="form-control" style="border: none;height: auto;">{$row.traffic_notice}</span>
            {/if}
        </div>
    </div>

    {if $group_id != 2}
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::radios('row[radio]', $statuslist, $row.status, ['data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Longitude and latitude')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-point" class="form-control" name="row[point]" type="text" data-rule="required" value="{$row.point}" readonly>
        </div>
    </div>
    {/if}
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Street')}:</label>
        <div class="col-xs-12 col-sm-8">

            {if $group_id != 2}
            <input id="c-address" class="form-control" name="row[address]" type="text" value="{$row.address}" placeholder="请填写全地址：例河南省郑州市金水区56号">
            {else/}
            <span class="form-control" style="border: none">{$row.address}</span>
            {/if}
        </div>
        {if $group_id != 2}
        <div class="col-xs-12 col-sm-2">
            <button class="btn btn-success city_address" type="button">地址定位</button>
        </div>
        {/if}
    </div>
    {if $group_id != 2}
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('定位')}:</label>
        <div class="col-xs-12 col-sm-9">
            <div id="container" style="height: 600px">
            </div>
        </div>
    </div>
    {/if}
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<!--引入Javascript API GL，参数说明参见下文-->
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service,tools&key=ABOBZ-X5AW7-RXHXD-PMSO5-COQJO-PVBD7"></script>
<script charset="utf-8" src="/assets/libs/jquery/dist/jquery.min.js"></script>
<script>
    function initMap() {
        var center = new TMap.LatLng({$row.latitude}, {$row.longitude});//设置中心点坐标
        //初始化地图
        var map = new TMap.Map('container', {
            zoom: 14,
            center: center,
        });
        var markerLayer = new TMap.MultiMarker({
            map: map,  //指定地图容器
            geometries: [{
                "id": "66",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                "styleId": 'myStyle66',  //指定样式id
                "position": center,  //点标记坐标位置
            }
            ]
        });

        //绑定点击事件
        map.on("click",function(evt){
            var lat = evt.latLng.getLat().toFixed(6);
            var lng = evt.latLng.getLng().toFixed(6);

            if(markerLayer){
                markerLayer.setGeometries([]);//清空点标记
            }

            //添加点标记
            markerLayer = new TMap.MultiMarker({
                map: map,  //指定地图容器
                geometries: [{
                    "id": "66",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                    "styleId": 'myStyle66',  //指定样式id
                    "position": new TMap.LatLng(lat, lng),  //点标记坐标位置
                }
                ]
            });

            $("#c-point").val(lng + "," + lat)
            // console.log(lng + "," + lat);

            //坐标转地址
            convert(map, lng, lat);

            //地址地图定位
            $(".city_address").click(function (){
                var address = $("#c-address").val();
                var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
                geocoder.getLocation({ address: address })
                    .then((result) => {
                        map.setCenter(result.result.location);
                    });
            });
        });

        //地址转换坐标并定位到地图
        $(".city_address").click(function (){
            if(markerLayer){
                markerLayer.setGeometries([]);//清空点标记
            }
            var address = $("#c-address").val();
            var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
            geocoder.getLocation({ address: address })
                .then((result) => {
                    map.setCenter(result.result.location);
                    // console.log(result.result.location);
                    //添加点标记
                    markerLayer = new TMap.MultiMarker({
                        map: map,  //指定地图容器
                        geometries: [{
                            "id": "66",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                            "styleId": 'myStyle66',  //指定样式id
                            "position": new TMap.LatLng(result.result.location.lat, result.result.location.lng),  //点标记坐标位置
                        }
                        ]
                    });
                });
        });


        //价格区域展示
        var paths1 = JSON.parse('<?php echo $areaList ?>');
        var station_path = [];
        for (var i = 0; i < paths1.length; i++) {
            var station_i = [];
            var station_is = [];
            for (var p = 0; p < paths1[i].length; p++) {
                station_i.push(new TMap.LatLng(paths1[i][p][1], paths1[i][p][0]));
            }
            station_is.push(station_i);
            station_path.push(station_is);
        }
        var geometries = [];
        if(station_path.length != 0){
            geometries.push({
                id: 'polygonSta', // 多边形图形数据的标志信息
                styleId: 'polygon1', // 样式id
                paths: station_path, // 多边形的位置信息
                properties: {
                    // 多边形的属性数据
                    title: '价格区域',
                },
            });
        }
        // 初始化polygon
        polygon = new TMap.MultiPolygon({
            id: 'polygon-layer', // 图层id
            map: map, // 显示多边形图层的底图
            styles: {
                // 多边形的相关样式
                polygon1: new TMap.PolygonStyle({
                    color: 'rgba(46,157,222,0.3)', // 面填充色
                    showBorder: true, // 是否显示拔起面的边线
                    borderColor: '#2E9DDE', // 边线颜色
                    borderDashArray:[3,3] // 虚线数组
                }),
            },
            geometries: geometries,
        });
    }


    //坐标转换地址
    function convert(map, lng, lat) {
        var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
        var location = new TMap.LatLng(Number(lat), Number(lng));
        geocoder.getAddress({ location: location }) // 将给定的坐标位置转换为地址
            .then((result) => {
                // console.log(result.result.address);
                $('#c-address').val(result.result.address);
            });
    }
</script>
</body>